<template>
  <div class="header">
    <div class="header-top">
      <div class="container">
        <div class="top-left">
          <a href="javascript:;">小米商城</a>
          <a href="javascript:;">MiUi</a>
          <a href="javascript:;">云服务</a>
          <a href="javascript:;">有品</a>
        </div>
        <div class="top-rigth">
          <router-link to="/login" v-if="!userName">登入</router-link>
          <a href="javascript:;" v-else>{{userName}}</a>
          <a href="javascript:;" v-if="userName" @click="logout" style="cursor: pointer;">退出</a>
          <a href="#">消息</a>
          <router-link to="/cart" class="shopcat"><span>购物车 ({{carlength.length || 0}})</span></router-link>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="container">
        <!-- logo部分可视区只有55px 切换显示logo -->
        <div class="header-logo">
          <router-link to="/" class="logo"></router-link>
        </div>
        <div class="header-attr">
          <ul>
            <li v-for="(item,index) in list" :key="index">
              <a href="">{{item.productName}}</a>
              <div class="attrList">
                <div class="w">
                  <router-link to="#" class="childBox" v-for="childItem in item.list" :key="childItem.id">
                    <img v-lazy="childItem.mainImage" alt="">
                    <h6 class="text">{{childItem.name}}</h6>
                    <span class="price">{{childItem.price}}元起</span>
                  </router-link>

                </div>
              </div>
            </li>

          </ul>
        </div>
        <div class="header-search">
          <input type="text">
          <a href="#" target="_balck"></a>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import { mapState } from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Header',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await this.$API.getProductList()
      this.list = res.data
    },
    logout() {
      this.$store.dispatch('logout')
    }
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.username
    },
    ...mapState(['shopCatList']),
    carlength() {
      return this.shopCatList.list || 0
    }
  }
}
</script>

<style lang=scss>
.w {
  width: 1226px;
  margin: 0 auto;
}
.header-top {
  width: 100%;
  height: 39px;
  background-color: #333;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      margin-right: 15px;
      color: rgb(230, 219, 219);
      &:hover {
        color: #fff;
      }
    }
    .top-rigth {
      height: 100%;
      line-height: 39px;
      .shopcat {
        position: relative;
        display: inline-block;
        width: 120px;
        text-align: center;
        margin: 0;
        background-color: #ff6600;
        &::before {
          position: absolute;
          left: 7%;
          top: 18%;
          content: ' ';
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url('../../../public/imgs/icon-cart.png') no-repeat center;
          background-size: contain;
        }
      }
    }
  }
}
.header-bottom {
  position: relative;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    .header-logo {
      overflow: hidden;
      width: 55px;
      height: 55px;
      background-color: #ff6600;
      .logo {
        display: inline-block;
        width: 110px;
        height: 55px;
        transition: all 0.3s;
        &::before {
          content: ' ';
          display: inline-block;
          width: 55px;
          height: 55px;
          background: url('../../../public/imgs/mi-logo.png') no-repeat center;
          background-size: contain;
        }
        &::after {
          content: ' ';
          display: inline-block;
          width: 55px;
          height: 55px;
          background: url('../../../public/imgs/mi-home.png') no-repeat center;
          background-size: contain;
        }
        &:hover {
          margin-left: -55px;
        }
      }
    }
    .header-attr {
      width: 400px;
      height: 100%;
      ul li {
        float: left;
        line-height: 100px;
        font-weight: 700;
        font-size: 16px;
        margin-right: 25px;
        a {
          display: block;
          color: #333;
          /* 鼠标经过品牌名称显示文字颜色和高度为230px */
          &:hover {
            color: #ff6600;
          }
        }
        &:hover .attrList {
          height: 230px;
          opacity: 1;
        }
        .attrList {
          position: absolute;
          width: 100%;
          height: 0;
          left: 0;
          top: 100px;
          opacity: 0;
          border-top: 1px solid #ccc;
          overflow: hidden;
          transition: all 0.3s;
          box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
          z-index: 999;
          .childBox {
            float: left;
            display: block;
            width: 204.333333333333333333333px;
            height: 200px;
            padding-top: 30px;
            line-height: 20px;
            text-align: center;
            background-color: #fff;
            font-size: 12px;
            &:hover {
              color: black;
            }
            img {
              border-right: 2px solid #ccc;
            }
            &:last-child img {
              border: 0;
            }

            .price {
              color: #ff6600;
            }
          }
        }
      }
    }
    .header-search {
      line-height: 100px;
      input {
        width: 245px;
        height: 50px;
        border: 1px solid rgb(187, 186, 186);
        padding-left: 20px;
      }
      a {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 1px solid rgb(187, 186, 186);
        border-left: 0;
        vertical-align: middle;
        background: url('../../../public/imgs/icon-search.png') no-repeat center;
        background-size: 20px;
      }
    }
  }
}
</style>
